//.Swiper
var mySwiper = new Swiper(".mySwiper", {
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

//.鼠标滑过pagination控制swiper切换
for (i = 0; i < mySwiper.pagination.bullets.length; i++) {
  mySwiper.pagination.bullets[i].onclick = function () {
    this.click();
  };
}

// .动画滚动效果
// Declass添加的动画效果类名
// selector添加动画效果的节点
// setLength设置触发动画的滚动距离
function handleScroll(Declass, selector, setLength = 600) {
  const element = document.querySelector(selector);
  // >getBoundingClientRect() 是一个常用于获取元素在视口中的位置和尺寸的方法
  const rect = element.getBoundingClientRect();
  // console.log(rect.top);
  // console.log(rect.bottom);
  if (rect.top < setLength) {
    element.classList.add("animate__animated", Declass);
  } else {
    element.classList.remove("animate__animated", Declass);
  }
}

// .监听滚动距离触发动画
window.addEventListener("scroll", () => {
  handleScroll("animate__fadeInLeft", ".box1");
  handleScroll("animate__fadeInLeft", ".btnAni1", 650);
  handleScroll("animate__fadeInRight", ".box2");
  handleScroll("animate__fadeInRight", ".btnAni2", 650);
  handleScroll("animate__fadeInLeft", "#left");
  handleScroll("animate__fadeInRight", "#right");
  handleScroll("animate__zoomIn", ".titleAni1", 700);
  handleScroll("animate__zoomIn", ".titleAni2", 700);
  handleScroll("animate__fadeInUp", ".containerBox2>.row", 950);
  handleScroll("animate__fadeInLeft", "#new", 950);
  handleScroll("animate__fadeIn", "footer", 650);
});
// .侧边栏显示隐藏
var LeftBanner = document.querySelector(".LeftBanner");
var aside = document.querySelector("aside");
// ?控制侧边栏显隐藏的变量
var isAsideVisible = true;

// ?侧边栏按钮点击事件
LeftBanner.addEventListener("click", function () {
  //   if (isAsideVisible) {
  //     aside.style.display = "flex";
  //   } else {
  //     aside.style.display = "none";
  //   }
  aside.style.display = isAsideVisible ? "flex" : "none";
  isAsideVisible = !isAsideVisible;
  console.log("点击按钮后", isAsideVisible);
});

// ?点击页面其他地方隐藏侧边栏
document.addEventListener("click", function (e) {
  if (
    !isAsideVisible &&
    !aside.contains(e.target) &&
    !LeftBanner.contains(e.target)
  ) {
    //>一定要判断侧边栏按钮是否被点击!!!!
    aside.style.display = "none";
    isAsideVisible = true;
  }
});

//.导航条下滚显示上滚隐藏
var scrollFunc = function (e) {
  let nav = document.querySelector("nav");
  // 这是一段兼容性代码，一般出现在事件处理的代码中
  // 有的浏览器将事件放在window.event对象里，而不是放在EventHandler.event参数里
  // 这段代码的意思，就是当e存在时用e，e不存在时使用window.event对象
  e = e || window.event;
  //判断浏览器IE，谷歌滑轮事件
  if (e.wheelDelta > 0) {
    //当滑轮向上滚动时
    nav.classList.remove("black");
  }
  if (e.wheelDelta < 0) {
    //当滑轮向下滚动时
    nav.classList.add("black");
    if (window.innerWidth < 1100) {
      nav.classList.remove("black");
    }
  }
};
document.onmousewheel = scrollFunc;
